<!DOCTYPE html>
<html class="has-navbar-fixed-top">
<head>
    <meta charset="utf-8">
<title>台风项目回顾 - wanzixin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.css">


<link href="/Item/zh-cn/%E5%8F%B0%E9%A3%8E%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE/" rel="alternate" hreflang="en" />
    


<meta name="description" content="">





    <meta name="description" content="本文是使用Leaflet开发某个台风项目过程中遇到的一些问题和解决方法的记录。">
<meta property="og:type" content="article">
<meta property="og:title" content="台风项目回顾">
<meta property="og:url" content="https://wanzixin.github.io/Item/zh-cn/%E5%8F%B0%E9%A3%8E%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE/index.html">
<meta property="og:site_name" content="wanzixin">
<meta property="og:description" content="本文是使用Leaflet开发某个台风项目过程中遇到的一些问题和解决方法的记录。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://user-images.githubusercontent.com/43515397/86454827-681e3700-bd52-11ea-946a-b8719fff90c4.png">
<meta property="og:image" content="https://user-images.githubusercontent.com/43515397/86453494-723f3600-bd50-11ea-9bd0-246a9c4ec6fe.png">
<meta property="article:published_time" content="2020-07-14T15:33:32.000Z">
<meta property="article:modified_time" content="2021-05-30T14:24:09.721Z">
<meta property="article:author" content="wanzixin">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://user-images.githubusercontent.com/43515397/86454827-681e3700-bd52-11ea-946a-b8719fff90c4.png">





<link rel="icon" href="/favicon.png">


<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ovo|Source+Code+Pro">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/css/lightgallery.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.5/css/justifiedGallery.min.css">


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">


<link rel="stylesheet" href="/css/style.css">


<script defer src="//use.fontawesome.com/releases/v5.0.8/js/all.js"></script>


    
    
    
    
    
    
    
    
    
    

    


<meta name="generator" content="Hexo 5.4.0"></head>
<body>
    
<nav class="navbar is-transparent is-fixed-top navbar-main" role="navigation" aria-label="main navigation">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item navbar-logo" href="/zh-cn">
                
                    
                    wanzixin
                    
                
            </a>
            <div class="navbar-burger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        
        <div class="navbar-menu navbar-start">
            
            <a class="navbar-item "
               href="/archives">Archives</a>
            
            <a class="navbar-item "
               href="/categories">Categories</a>
            
            <a class="navbar-item "
               href="/categories/Diary">Diary</a>
            
            <a class="navbar-item "
               href="/categories/Gallery">Gallery</a>
            
            <a class="navbar-item "
               href="/categories/Study">Study</a>
            
            <a class="navbar-item "
               href="/categories/Item">Item</a>
            
            <a class="navbar-item "
               href="/about">About</a>
            
        </div>
        
        <div class="navbar-menu navbar-end">
            
            <a class="navbar-item search" title="搜索" href="javascript:;">
                <i class="fas fa-search"></i>
            </a>
            
            
            <div class="navbar-item is-hoverable has-dropdown is-hidden-mobile is-hidden-tablet-only toc">
                <a class="navbar-item" title="目录">
                    <i class="fa fa-list"></i>
                </a>
                <div class="navbar-dropdown is-right">
                    
                    
                    
                    
                    <a class="navbar-item" href="#Leaflet中使用复选框控制图层显示">1&nbsp;&nbsp;<b>Leaflet中使用复选框控制图层显示</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#台风风圈的绘制">2&nbsp;&nbsp;<b>台风风圈的绘制</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#给表格添加滚动条，设置后无效">3&nbsp;&nbsp;<b>给表格添加滚动条，设置后无效</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#Leaflet中加载Mapbox自定义地图">4&nbsp;&nbsp;<b>Leaflet中加载Mapbox自定义地图</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#单击表格行等同于单击行内的复选框，选中图层">5&nbsp;&nbsp;<b>单击表格行等同于单击行内的复选框，选中图层</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#一个div浮在一个div之上">6&nbsp;&nbsp;<b>一个div浮在一个div之上</b></a>
                    
                    
                    <hr class="navbar-divider">
                    
                    
                    <a class="navbar-item" href="#Echarts绘制图表的依赖">7&nbsp;&nbsp;<b>Echarts绘制图表的依赖</b></a>
                    
                </div>
            </div>
            
            
            <a class="navbar-item" title="GitHub" target="_blank" rel="noopener" href="https://github.com/wanzixin">
                
                <i class="fab fa-github"></i>
                
            </a>
               
            
        </div>
    </div>
</nav>

    <section class="section">
    <div class="container">
    <article class="article content gallery" itemscope itemprop="blogPost">
    <h1 class="article-title is-size-3 is-size-4-mobile" itemprop="name">
        
            台风项目回顾
        
    </h1>
    <div class="article-meta columns is-variable is-1 is-multiline is-mobile is-size-7-mobile">
        <span class="column is-narrow">
            
                <span>7月 14 2020</span>
            
        </span>
        
        <span class="column is-narrow article-category">
            <i class="far fa-folder"></i>
            <a class="article-category-link" href="/zh-cn/categories/Item/">Item</a>
        </span>
        
        
        <span class="column is-narrow">
            
            
            10 分钟 读完 (约 1426 字)
        </span>
        
    </div>
    <div class="article-entry is-size-6-mobile" itemprop="articleBody">
    
        <html><head></head><body><p>本文是使用Leaflet开发某个台风项目过程中遇到的一些问题和解决方法的记录。<span id="more"></span></p>
<h2 id="Leaflet中使用复选框控制图层显示"><a href="#Leaflet中使用复选框控制图层显示" class="headerlink" title="Leaflet中使用复选框控制图层显示"></a>Leaflet中使用复选框控制图层显示</h2><p>Leaflet本身有图层控制的支持，但最近用Leaflet做台风的小项目，其中一个细节是使用复选框控制图层显示与否，解决方法作如下记录。在表格中的”选择”列是对应一个台风图层的复选框，通过勾选来展示和隐藏本图层。Leaflet中的图层有其所属的leaflet_id，是为了保证图层的唯一性，但要选中复选框来操作对应的图层，显然leaflet_id帮不上什么忙了。</p>
<p>于是，在绘制图层时给图层绑定一个自定义的<strong>layerId</strong>。</p>
<figure class="highlight js hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> id = <span class="hljs-number">202002</span>;<br><span class="hljs-keyword">var</span> lyr_point = L.circle(……);<br><span class="hljs-keyword">var</span> lyr_polyline = L.polyline(……);<br><span class="hljs-keyword">var</span> lyr = L.featureGroup([lyr_point,lyr_polyline]);<br>lyr.options.layerId = id; <span class="hljs-comment">// 给图层（组）lyr绑定自定义id,在options参数里添加</span><br></code></pre></td></tr></tbody></table></figure>

<p><img src="https://user-images.githubusercontent.com/43515397/86454827-681e3700-bd52-11ea-946a-b8719fff90c4.png" alt="_leaflet_id"></p>
<p>js创建复选框时，给每一个复选框绑定id，值即为对应台风的id。要展示图层时，查看当前选中复选框是否选中，若选中则根据id构造url绘制；要隐藏图层时，遍历图层组，若传入的id与某一个图层的layerId匹配，则隐藏该图层。复选框绑定的函数框架如下，这样就可以实现使用复选框控制图层了。</p>
<figure class="highlight javascript hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showPath</span>(<span class="hljs-params">id</span>)</span>{<br>    <span class="hljs-keyword">if</span>(<span class="hljs-built_in">document</span>.getElementById(id.toString()).checked){<br>        <span class="hljs-comment">//这里使用id构造url，利用返回的数据绘制图层</span><br>    }<span class="hljs-keyword">else</span>{<br>        lyrGroup.eachLayer(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">layer</span>)</span>{<br>            <span class="hljs-keyword">if</span>(id == layer.options.LayersID){<br>                lyr.removeLayer(layer);<br>            }<br>    	}<br>    }<br>}<br></code></pre></td></tr></tbody></table></figure>



<p><img src="https://user-images.githubusercontent.com/43515397/86453494-723f3600-bd50-11ea-9bd0-246a9c4ec6fe.png" alt="示意图"></p>
<h2 id="台风风圈的绘制"><a href="#台风风圈的绘制" class="headerlink" title="台风风圈的绘制"></a>台风风圈的绘制</h2><p>Leaflet中绘制台风风圈，网上有<a target="_blank" rel="noopener" href="https://blog.csdn.net/chysxslt/article/details/105912623">一篇博客</a>实现的比较完整，具体思路是扩展L.Polygon类，使用SVG的path绘制。但我这里调用这个扩展类绘制的风圈不稳定，在地图缩放、拖动，窗口大小的改变都会是风圈图层消失。在浏览器中查看，发现上述操作是SVG的path里的d属性清零了，百思不得其解，于是乎放弃这个方法，改使用turf.js绘制风圈。</p>
<p>turf.js是浏览器和Node.js环境下的高级地理空间分析的js库，里面实现了很多常见的空间分析，比如缓冲区、点在多边形内等。我这里用<a target="_blank" rel="noopener" href="http://turfjs.org/docs/#lineArc">lineArc函数</a>，指定中心点、半径、起始和终止角度后，它可以绘制一段圆弧，注意这里的圆弧是由计算出来的很多点拟合而成的，并不是真正的绘制了一条圆弧。其中options参数中的step默认为64，如果想要展示效果更顺滑一点，可以选择拟合点数。</p>
<p>分别指定东北，东南，西南，西北四个方向上的半径长度，单位默认是kilometer，生成四段圆弧，再把四段圆弧的坐标都push进一个数组，利用lineString函数生成线要素，再利用lineToPolygon函数转换为多边形。</p>
<p>最后，使用L.geoJSON将风圈图层添加到地图上。实现函数贴在下方。</p>
<figure class="highlight javascript hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// p--中心点（包含四个方向的半径）,lyr--风圈图层所添加进的图层组</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">drawTyphoonCircle</span>(<span class="hljs-params">p,lyr</span>)</span>{<br>    <span class="hljs-keyword">var</span> center = turf.point([p.longitude, p.latitude]);<br>    <span class="hljs-keyword">var</span> r_ne,r_se,r_sw,r_nw;<br>    <span class="hljs-keyword">if</span>(p.radius7_quad &amp;&amp; p.radius7){    <br>        r_ne = p.radius7_quad.ne;<br>        r_se = p.radius7_quad.se;<br>        r_sw = p.radius7_quad.sw;<br>        r_nw = p.radius7_quad.nw;<br>    }<span class="hljs-keyword">else</span>{<br>        <span class="hljs-keyword">return</span>;<br>    }<br>    <span class="hljs-keyword">var</span> options = {<span class="hljs-attr">number</span>:<span class="hljs-number">2048</span>};<br>    <span class="hljs-keyword">var</span> arc_ne = turf.lineArc(center, r_ne, <span class="hljs-number">0</span>, <span class="hljs-number">89.9</span>,options);<br>    <span class="hljs-keyword">var</span> arc_se = turf.lineArc(center, r_se, <span class="hljs-number">90</span>, <span class="hljs-number">179.9</span>,options);<br>    <span class="hljs-keyword">var</span> arc_sw = turf.lineArc(center, r_sw, <span class="hljs-number">180</span>, <span class="hljs-number">269.9</span>,options);<br>    <span class="hljs-keyword">var</span> arc_nw = turf.lineArc(center, r_nw, <span class="hljs-number">270</span>, <span class="hljs-number">360.1</span>,options);<br><br>    <span class="hljs-keyword">var</span> arcs = [];<br>    arcs.push(arc_ne,arc_se,arc_sw,arc_nw);<br><br>    <span class="hljs-keyword">var</span> myStyle = {<br>        <span class="hljs-string">"color"</span>: <span class="hljs-string">"#ccffcc"</span>,<br>        <span class="hljs-string">"weight"</span>: <span class="hljs-number">2</span>,<br>        <span class="hljs-string">"fillColor"</span>:<span class="hljs-string">"#ccffcc"</span><br>    };<br><br>    <span class="hljs-keyword">var</span> typhoonCircleCoords = [];<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;arcs.length;i++){<br>        <span class="hljs-keyword">var</span> rawCoords1 = arcs[i].geometry.coordinates;<br><br>        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>;j&lt;rawCoords1.length;j++){<br>            typhoonCircleCoords.push(rawCoords1[j]);<br>        }<br>    }<br><br>    <span class="hljs-keyword">var</span> lineAll = turf.lineString(typhoonCircleCoords);<br>    <span class="hljs-keyword">var</span> typhoonCirclePolygon = turf.lineToPolygon(lineAll);<br><br>    L.geoJSON(typhoonCirclePolygon,{<span class="hljs-attr">style</span>:myStyle}).addTo(lyr);<br>}<br></code></pre></td></tr></tbody></table></figure>

<h2 id="给表格添加滚动条，设置后无效"><a href="#给表格添加滚动条，设置后无效" class="headerlink" title="给表格添加滚动条，设置后无效"></a>给表格添加滚动条，设置后无效</h2><p>overflow-y设置为true后，要设置height为一个固定的值，比如600px。</p>
<h2 id="Leaflet中加载Mapbox自定义地图"><a href="#Leaflet中加载Mapbox自定义地图" class="headerlink" title="Leaflet中加载Mapbox自定义地图"></a>Leaflet中加载Mapbox自定义地图</h2><p>使用L.tileLayer创建，url template中的username是Mapbox的注册账户的用户名。在<a target="_blank" rel="noopener" href="https://studio.mapbox.com/">https://studio.mapbox.com/</a>中自定义图层的分享按钮处点击，即可看到style_id和Access Token。</p>
<figure class="highlight javascript hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> mymap = L.map(<span class="hljs-string">'map'</span>).setView([<span class="hljs-number">20.557212</span>,<span class="hljs-number">126.402354</span>],<span class="hljs-number">3.5</span>);<br><br>L.tileLayer(<span class="hljs-string">'https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/512/{z}/{x}/{y}?access_token={accessToken}'</span>,{<br>    <span class="hljs-attr">username</span>:<span class="hljs-string">'whitedreamer'</span>,<br>    <span class="hljs-attr">style_id</span>:<span class="hljs-string">'cjn64ahui0ycg2rq72fer5a3r'</span>,<br>    <span class="hljs-attr">accessToken</span>:<span class="hljs-string">'pk.eyJ1Ijoid2hpdGVkcmVhbWVyIiwiYSI6ImNqbjN4azFjcDAwbG0zcG52aGc3M2x0M2sifQ.CYsl1oXDVr1PWgx4z6lSeg'</span><br>}).addTo(mymap);<br></code></pre></td></tr></tbody></table></figure>

<h2 id="单击表格行等同于单击行内的复选框，选中图层"><a href="#单击表格行等同于单击行内的复选框，选中图层" class="headerlink" title="单击表格行等同于单击行内的复选框，选中图层"></a>单击表格行等同于单击行内的复选框，选中图层</h2><p>这个功能是问题1的改进版，需要修改原有的代码逻辑。首先，删除复选框的onclick绑定的事件，然后改写showPath函数：根据图层id（等同于checkbox的id）绘制台风路径，增加hidePath函数：根据图层id隐藏台风路径；最后，编写selectARow函数，获取所点击表格行中的复选框id，根据id判断图层是否已绘制，若未绘制则绘制该图层，若已绘制则取消绘制。</p>
<p>注意：selectARow函数根据id判断复选框是否被选中来判断图层是否已绘制，存在逻辑矛盾，因为点击复选框是点击就绘制，取消就取消绘制；而点击表格行是若未选中则选中后绘制，若选中了则取消选中然后取消绘制。这两个逻辑相反，无法调和，故采取上述逻辑。</p>
<figure class="highlight javascript hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showPath</span>(<span class="hljs-params">id</span>)</span>{<br>    lyr_num += <span class="hljs-number">1</span>;<span class="hljs-comment">//lyr_num是图层数量</span><br>        <span class="hljs-keyword">if</span>(lyr_num &gt; <span class="hljs-number">4</span>){<br>            alert(<span class="hljs-string">'Layers More Than 4.'</span>);<br>        }<br><br>        <span class="hljs-keyword">var</span> url = <span class="hljs-string">'https://www.readearth.com/typhoon/'</span>+id.toString().slice(<span class="hljs-number">0</span>,<span class="hljs-number">4</span>)+<span class="hljs-string">'/'</span>+id+<span class="hljs-string">'.json'</span>;<br>        draw(url,id);<br>        $(<span class="hljs-string">'.badge'</span>)[<span class="hljs-number">0</span>].innerHTML=lyr_num;<span class="hljs-comment">//bootstrap徽标，显示在按钮上，展示当前选中的图层数量</span><br>        ids.push(id);<br>}<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hidePath</span>(<span class="hljs-params">id</span>)</span>{<br>    lyr.eachLayer(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">layer</span>)</span>{<br>        <span class="hljs-keyword">if</span>(id == layer.options.LayersID){<br>            lyr.removeLayer(layer);<br>            lyr_num -= <span class="hljs-number">1</span>;<br>            $(<span class="hljs-string">'.badge'</span>)[<span class="hljs-number">0</span>].innerHTML=lyr_num;<span class="hljs-comment">//更新当前显示的图层数量</span><br>        }<br>    });<br><br>    ids.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item, index</span>) </span>{<br>        <span class="hljs-keyword">if</span>(item == id) {<br>            ids.splice(index, <span class="hljs-number">1</span>);<span class="hljs-comment">//删除id数组中的对应项</span><br>        }<br>    });<br>}<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">selectARow</span>(<span class="hljs-params"></span>)</span>{<br>    $(<span class="hljs-string">'.table'</span>).on(<span class="hljs-string">'click'</span>,<span class="hljs-string">'tr'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<br>        <span class="hljs-keyword">var</span> td_checkbox = $(<span class="hljs-built_in">this</span>)[<span class="hljs-number">0</span>].children[<span class="hljs-number">3</span>];<span class="hljs-comment">//获取checkbox所在td</span><br>        <span class="hljs-keyword">var</span> checkbox = td_checkbox.children[<span class="hljs-number">0</span>];<span class="hljs-comment">//获取checkox</span><br>        <span class="hljs-keyword">var</span> id = <span class="hljs-built_in">parseInt</span>(checkbox.id);<span class="hljs-comment">//获取checkbox的id</span><br><br>        <span class="hljs-comment">// flag标志行对应的图层是否已绘制，若已绘制则移除，若未绘制则绘制，默认未绘制</span><br>        <span class="hljs-keyword">var</span> layers = lyr.getLayers();<br>        <span class="hljs-keyword">var</span> flag = <span class="hljs-number">0</span>;<br>        <span class="hljs-keyword">if</span>(layers.length){<br>            lyr.eachLayer(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">layer</span>)</span>{<br>                <span class="hljs-keyword">if</span>(id == layer.options.LayersID){<br>                    flag = <span class="hljs-number">1</span>;<br>                }<br>            })<br>        }<br>        <span class="hljs-keyword">if</span>(flag){<br>            checkbox.checked = <span class="hljs-literal">false</span>;<br>            hidePath(id);  <br>        }<span class="hljs-keyword">else</span>{<br>            checkbox.checked = <span class="hljs-literal">true</span>;<br>            showPath(id);<br>        }      <br>    })<br>}<br></code></pre></td></tr></tbody></table></figure>

<h2 id="一个div浮在一个div之上"><a href="#一个div浮在一个div之上" class="headerlink" title="一个div浮在一个div之上"></a>一个div浮在一个div之上</h2><p>假设div1在底下，div2浮在上方，则css应该这么写。注意：div1与div2之间是平行关系，不是嵌套关系，但div1定义要在div2之上。</p>
<figure class="highlight css hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-id">#div1</span>{<br>    <span class="hljs-attribute">position</span>:absolute;<br>}<br><br><span class="hljs-selector-id">#div2</span>{<br>    positon:relative;<br>    <span class="hljs-attribute">z-index</span>:<span class="hljs-number">1</span>/*div2的z-index大于div1的z-index即可，默认div1的z-index为<span class="hljs-number">0</span>*/<br>}<br></code></pre></td></tr></tbody></table></figure>

<h2 id="Echarts绘制图表的依赖"><a href="#Echarts绘制图表的依赖" class="headerlink" title="Echarts绘制图表的依赖"></a>Echarts绘制图表的依赖</h2><p>从Echarts官网下载的官方案例会引入很多文件，一般的图表，像饼图、条形图、折线图等等，只需要引入一个文件，即：</p>
<figure class="highlight javascript hljs"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> &lt;!-- 引入echarts.js --&gt;<br><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">'text/javascript'</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br></code></pre></td></tr></tbody></table></figure>

<p>推荐下载下来本地引用，在线引用略慢。</p>
</body></html>
    
    </div>
    
    
    <div class="columns is-mobile is-multiline article-nav">
        <span class="column is-12-mobile is-half-desktop  article-nav-prev">
            
            <a href="/Item/zh-cn/ArcGIS%E4%B8%AD%E8%87%AA%E5%AE%9A%E4%B9%89Python%E8%84%9A%E6%9C%AC%E5%B7%A5%E5%85%B7/">ArcGIS中自定义Python脚本工具</a>
            
        </span>
        <span class="column is-12-mobile is-half-desktop  article-nav-next">
            
            <a href="/Item/zh-cn/%E4%BD%BF%E7%94%A8POI%E6%9B%BF%E6%8D%A2Word%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84%E5%85%B3%E9%94%AE%E8%AF%8D/">使用POI替换Word模板中的关键词</a>
            
        </span>
    </div>
    
</article>


<div class="sharebox">
    
<div class="sharethis-inline-share-buttons"></div>
<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=608c1408daac690012507aa2&amp;product=sop' async='async'></script>

</div>



    </div>
</section>
    <footer class="footer">
    <div class="container">
        <div class="columns content">
            <div class="column is-narrow has-text-centered">
                &copy; 2021 wanzixin&nbsp;
                Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> & <a
                        target="_blank" rel="noopener" href="http://github.com/ppoffice/hexo-theme-minos">Minos</a>
            </div>
            <div class="column is-hidden-mobile"></div>

            
            <div class="column is-narrow">
                <div class="columns is-mobile is-multiline is-centered">
                
                    
                <a class="column is-narrow has-text-black" title="GitHub" target="_blank" rel="noopener" href="https://github.com/ppoffice/hexo-theme-minos">
                    
                    GitHub
                    
                </a>
                
                </div>
            </div>
            
            
<div class="column is-narrow has-text-centered">
    <div class="dropdown is-up is-right is-hoverable" style="margin-top: -0.2em;">
        <div class="dropdown-trigger">
            <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu7">
                <span class="icon">
                    <i class="fas fa-globe"></i>
                </span>
                <span>简体中文</span>
                <span class="icon is-small">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
            </button>
        </div>
        <div class="dropdown-menu has-text-left" role="menu">
            <div class="dropdown-content">
            
                <a href="/Item/zh-cn/%E5%8F%B0%E9%A3%8E%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE/" class="dropdown-item">
                    English
                </a>
            
                <a href="/zh-cn/Item/zh-cn/%E5%8F%B0%E9%A3%8E%E9%A1%B9%E7%9B%AE%E5%9B%9E%E9%A1%BE/" class="dropdown-item">
                    简体中文
                </a>
            
            </div>
        </div>
    </div>
</div>

        </div>
    </div>
</footer>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>

<!-- test if the browser is outdated -->
<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" target="_blank" rel="noopener" href="http://outdatedbrowser.com/">Update my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/outdated-browser/1.1.5/outdatedbrowser.min.js"></script>
<script>
    $(document).ready(function () {
        // plugin function, place inside DOM ready function
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        })
    });
</script>

<script>
    window.FontAwesomeConfig = {
        searchPseudoElements: true
    }
    moment.locale("zh-CN");
</script>


    
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script>
    MathJax.Hub.Config({
        "HTML-CSS": {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
</script>

    
    
    
    
<script src="//cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.8/js/lightgallery-all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.5/js/jquery.justifiedGallery.min.js"></script>
<script>
    (function ($) {
        $(document).ready(function () {
            if (typeof($.fn.lightGallery) === 'function') {
                $('.article.gallery').lightGallery({ selector: '.gallery-item' });
            }
            if (typeof($.fn.justifiedGallery) === 'function') {
                $('.justified-gallery').justifiedGallery();
            }
        });
    })(jQuery);
</script>

    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <style>
        .hljs {
            position: relative;
        }

        .hljs .clipboard-btn {
            float: right;
            color: #9a9a9a;
            background: none;
            border: none;
            cursor: pointer;
        }

        .hljs .clipboard-btn:hover {
          color: #8a8a8a;
        }

        .hljs > .clipboard-btn {
            display: none;
            position: absolute;
            right: 4px;
            top: 4px;
        }

        .hljs:hover > .clipboard-btn {
            display: inline;
        }

        .hljs > figcaption > .clipboard-btn {
            margin-right: 4px;
        }
    </style>
    <script>
      $(document).ready(function () {
        $('figure.hljs').each(function(i, figure) {
          var codeId = 'code-' + i;
          var code = figure.querySelector('.code');
          var copyButton = $('<button>Copy <i class="far fa-clipboard"></i></button>');
          code.id = codeId;
          copyButton.addClass('clipboard-btn');
          copyButton.attr('data-clipboard-target-id', codeId);

          var figcaption = figure.querySelector('figcaption');

          if (figcaption) {
            figcaption.append(copyButton[0]);
          } else {
            figure.prepend(copyButton[0]);
          }
        })

        var clipboard = new ClipboardJS('.clipboard-btn', {
          target: function(trigger) {
            return document.getElementById(trigger.getAttribute('data-clipboard-target-id'));
          }
        });
        clipboard.on('success', function(e) {
          e.clearSelection();
        })
      })
    </script>

    
    

    



<script src="/js/script.js"></script>


    
    <div class="searchbox ins-search">
    <div class="searchbox-mask"></div>
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="站内搜索" />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.zh-cn.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>

<script src="/js/insight.js"></script>

    
</body>
</html>